/*
 * @Author: wangtao
 * @Date: 2021-06-01 16:40:03
 * @LastEditors: 汪滔
 * @LastEditTime: 2021-07-22 17:25:06
 * @Description: 司机认证
 */
import React, { Component } from 'react';
import { StyleSheet, Text, View, Image, PixelRatio } from 'react-native';
import LinearGradient from 'react-native-linear-gradient';
import api from '@/api';
import { msg, Button, AsyncStorage, cache } from '@/common';
import {
  iconSuccessGreen,
  iconWaringYellow,
  iconErrorRed,
  iconWaitCoffee,
} from '@/images';
import {
  mainBgColorLightGray,
  screenWidth,
  px2dp,
  fontColorDeepGray,
  fontColorSecDeepGray,
  mainBgColorWhite,
  splitLineColorLightGray,
} from '@/styles';

const { Submit } = Button;

export default class CertificationProgress extends Component {
  constructor(props) {
    super(props);
    this.state = {
      progress: 0,
      driverCerStatus: 0,
      user: {}
    };
  }

  componentDidMount() {
    this.checkCertifi();
    AsyncStorage.getItem(cache.USER_INFO).then((res) => {
      this.setState({ user: res });
    });
  }

  render() {
    const { progress, user } = this.state;
    const progressWidth = `${(progress / 2) * 100}%`;
    return (
      <View style={styles.container}>
        <View style={styles.progressWrap}>
          <Text style={styles.progressNum}>
            完成度
            {progress}
            /
            {2}
          </Text>
          <LinearGradient
            stystart={{ x: 1, y: 1 }}
            end={{ x: 1, y: 1 }}
            colors={['#FFC55D', '#BB934B']}
            style={[styles.linearBg, { width: progressWidth }]}
          />
        </View>
        <View style={styles.progressList}>
          <View style={styles.progressItem}>
            <View style={styles.itemLeft}>
              <Image
                source={iconSuccessGreen}
                resizeMode='contain'
                style={styles.iconImg}
              />
              <View style={styles.itemLabel}>
                <Text style={styles.title}>实名认证</Text>
                <Text style={styles.desc}>{user.citizenIdNumber ? `${user.citizenIdNumber.slice(0, 4)}************${user.citizenIdNumber.slice(-2)}` : ''}</Text>
              </View>
            </View>
            <View style={styles.itemRight}>
              <Text style={[styles.btnTextStyle, { marginRight: px2dp(30) }]}>已认证</Text>
            </View>
          </View>

          {/* 司机认证 */}
          <View style={[styles.progressItem, { borderBottomWidth: 0 }]}>
            <View style={styles.itemLeft}>
              <Image
                source={this.showCertIcon()}
                resizeMode='contain'
                style={styles.iconImg}
              />
              <View style={styles.itemLabel}>
                <Text style={styles.title}>司机认证</Text>
                <Text style={styles.desc}>{this.showCertViewTip()}</Text>
              </View>
            </View>
            <View style={styles.itemRight}>{this._renderBtnStatus()}</View>
          </View>
        </View>
      </View>
    );
  }

  checkCertifi = () => {
    // 是否完善身份认证
    api.user.getUserAuthInBusiness().then((res) => {
      if (res.success) {
        const sources = res.data;
        let filterArr = sources.filter((item) => {
          if (item.state === 1 && item.validateCode === 'REAL_NAME_AUTHENTICATION') {
            return true;
          }
          return false;
        });
        if (filterArr.length > 0) {
          this.setState({ progress: 1 }, () => {
            this.getDriverCer();
          });
        }
      }
    });
  };

  getDriverCer = () => {
    // 获取司机认证状态
    api.supply.getDriverCer().then((res) => {
      if (res.success) {
        if (res.data.state === 2) {
          this.setState({
            progress: 2,
          });
        }
        this.setState({
          driverCerStatus: res.data.state,
        });
      }
    });
  };

  showCertViewTip = () => {
    const { driverCerStatus } = this.state;
    switch (driverCerStatus) {
    case 0:
      return '未认证';
    case 1:
      return '审核中';
    case 3:
      return '审核失败';
    case 2:
      return '认证通过';
    default:
      return '-';
    }
  };

  showCertIcon = () => {
    const { driverCerStatus } = this.state;
    switch (driverCerStatus) {
    case 0:
      return iconWaringYellow;
    case 1:
      return iconWaitCoffee;
    case 3:
      return iconErrorRed;
    case 2:
      return iconSuccessGreen;
    default:
      return iconWaringYellow;
    }
  };

  _renderBtnStatus = () => {
    const { driverCerStatus } = this.state;
    switch (driverCerStatus) {
    case 0:
      return (
        <Submit
          text='去认证'
          boxStyle={styles.boxStyle}
          btnStyle={{}}
          btnTextStyle={styles.btnTextStyle}
          onClick={() => {
            msg.emit('router: goToNext', {
              routeName: 'DriverCer',
              routerFrom: 'CertificationProgress'
            });
          }}
        />
      );
    case 1:
      return <Text style={styles.btnTextStyle}>审核中</Text>;
    case 3:
      return (
        <Submit
          text='重新认证'
          boxStyle={styles.boxStyle}
          btnStyle={{}}
          btnTextStyle={styles.btnTextStyle}
          onClick={() => {
            msg.emit('router: goToNext', {
              routeName: 'DriverCer',
              routerFrom: 'CertificationProgress'
            });
          }}
        />
      );
    case 2:
      return <Text style={[styles.btnTextStyle, { marginRight: px2dp(30) }]}>已认证</Text>;
    default:
      return null;
    }
  };
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: mainBgColorLightGray,
    alignItems: 'center',
  },
  progressWrap: {
    backgroundColor: mainBgColorWhite,
    width: screenWidth,
  },
  progressNum: {
    textAlign: 'center',
    fontSize: px2dp(24),
    color: fontColorDeepGray,
  },
  progressList: {
    width: screenWidth,
    marginTop: px2dp(24),
    paddingHorizontal: px2dp(32),
    backgroundColor: mainBgColorWhite,
  },
  progressItem: {
    width: '100%',
    height: px2dp(148),
    backgroundColor: mainBgColorWhite,
    borderBottomWidth: 1 / PixelRatio.get(),
    borderBottomColor: splitLineColorLightGray,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
  },
  iconImg: {
    width: px2dp(36),
    height: px2dp(36),
  },
  itemLeft: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  itemLabel: {
    marginLeft: px2dp(24),
  },
  title: {
    fontSize: px2dp(32),
  },
  desc: {
    fontSize: px2dp(24),
    color: fontColorSecDeepGray,
  },
  linearBg: {
    height: px2dp(4),
    alignSelf: 'flex-start',
  },
  btnTextStyle: {
    fontSize: px2dp(24),
    color: fontColorDeepGray,
  },
  boxStyle: {
    width: px2dp(136),
    height: px2dp(62),
    borderRadius: px2dp(8),
    backgroundColor: mainBgColorWhite,
    borderColor: splitLineColorLightGray,
    borderWidth: 1 / PixelRatio.get(),
  },
});
